// All tag
* {
    margin:0;
    padding:0;
    border:none;
    font-size: 1.5625vw;
    font-family: "microsoft Yahei";
}
html,body {
    height: 100%;
    overflow: hidden;
}

//Music
.music {
    position: fixed;
    top: 3vh;
    right: 4vw;
    z-index: 5;
    width: 15vw;
    height: 15vw;
    border:4px solid #ef1639;
    -webkit-border-radius:50%;
    border-radius:50%;
    background: #fff;
    > img {
        &:first-child {
            position: absolute; 
            top: 24%;
            right: 2.5%;
            width: 28.421%;
            z-index: 1;
        } 
        &:last-child {
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            margin: auto;
            width: 79%;
            z-index: 0;
        }
        &.play {
            -webkit-animation: music_disc 4s linear infinite;
            animation: music_disc 4s linear infinite;
        }
    }
}
@-webkit-keyframes music_disc {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}
@keyframes music_disc {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}


//Page Bg
.page {
    position: absolute;
    width: 100%;
    height: 100%;
    .bg {
        position: absolute;
        z-index: -1;
        width: 100%;
        height: 100%;
        background-size: 100%;
    }
}

//page1
#page1 {
    display: block;
    .bg {
        background: url("../img/p1_bg.jpg") no-repeat center center;
    }
    .p1_lantern {
        position: absolute;
        top: -3.4%;
        right: 0;
        left: 0;
        margin: auto;
        width: 45vw;
        height: 71.2vh;
        font-size: 3.506rem;
        color: #fff;
        background:url("../img/p1_lantern.png") no-repeat center center;
        background-size: 100%;
        padding-top: 31vh;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        text-align: center;
        &:before {
            position: absolute;
            top: 0;
            right: 0;
            left: 0;
            bottom: 0;
            z-index: -1;
            content: "";
            margin:auto;
            width: 30vw;
            height: 30vw;
            background: #d60b3b;
            opacity: .5;
            border-radius: 50%;
            -webkit-box-shadow: 0 0 10vw 10vw #d60b3b;
            box-shadow: 0 0 10vw 10vw #d60b3b;
            -webkit-animation: p1_lantern .5s infinite alternate;
            animation: p1_lantern .5s infinite alternate;
        }
    }
    .p1_icon {
        position: absolute;
        right: 0;
        left: 0;
        bottom: 9vh;
        background: url("../img/p1_imooc.png") no-repeat center center;
        background-size: 100%;
        width: 27.656vw;
        height: 18.63vh;
        margin:auto;
    }
    .p1_words {
        font-size: 2.134rem;
        position: absolute;
        right: 0;
        bottom: 30px;
        left: 0;
        text-align: center;
        color: #231815;
    }
}
@-webkit-keyframes p1_lantern {
    0% {
        opacity: .5;
        -webkit-transform: scale(.8,.8);
        transform: scale(.8,.8);
    }
    100% {
        opacity: 1;
    }
}
@keyframes p1_lantern {
    0% {
        opacity: .5;
        -webkit-transform: scale(.8,.8);
        transform: scale(.8,.8);
    }
    100% {
        opacity: 1;
    }
}

//page2
#page2 {
    display: none;
    -webkit-transition: .5s;
    transition: .5s;
    &.fadeOut{
        opacity: .3;
        -webkit-transform: translate(0,-100%);
        transform: translate(0,-100%);
    }
    .bg {
        background: url("../img/p2_bg.jpg") no-repeat center center;
    }
    .p2_circle {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        margin: auto;
        background: url("../img/p2_circle_outer.png") no-repeat center center;
        background-size: 100%;
        width: 59.375vw;
        height: 59.375vw;
        -webkit-animation: p2_circle_outer 1s linear 3s infinite;
        animation: p2_circle_outer 1s linear 3s infinite;
        &:before{
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            margin: auto;
            content: "";    
            background: url("../img/p2_circle_middle.png") no-repeat center center;
            background-size: 100%;
            width: 45.625vw;
            height: 45.625vw;
            -webkit-animation: p2_circle_middle 1s linear 2s infinite;
            animation: p2_circle_middle 1s linear 2s infinite;
        }
        &:after {
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            margin: auto;
            content: ""; 
            background: url("../img/p2_circle_inner.png") no-repeat center center;
            background-size: 100%;
            width: 39.9375vw;
            height: 39.9375vw;
            -webkit-animation: p2_circle_inner 1s linear 1s infinite;
            animation: p2_circle_inner 1s linear 1s infinite;
        }
    }
    .p2_2018 {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        margin: auto;
        background: url("../img/p2_2018.png") no-repeat center center;
        background-size: 100%;
        width: 27.5vw;
        height: 7.5vh;
    }
    .p2_bg_loading {
        z-index: 4;
        background: #EF1639;
        -webkit-animation: p2_bg_loading 1s linear forwards;
        animation: p2_bg_loading 1s linear forwards;
    }
}
@-webkit-keyframes p2_circle_inner {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(-1080deg);
        transform: rotate(-1080deg);
    }
}
@keyframes p2_circle_inner {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(-1080deg);
        transform: rotate(-1080deg);
    }
}
@-webkit-keyframes p2_circle_middle {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(-1080deg);
        transform: rotate(-1080deg);
    }
}
@keyframes p2_circle_middle {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(-1080deg);
        transform: rotate(-1080deg);
    }
}
@-webkit-keyframes p2_circle_outer {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(-720deg);
        transform: rotate(-720deg);
    }
}
@keyframes p2_circle_outer {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(-360deg);
        transform: rotate(-360deg);
    }
}
@-webkit-keyframes p2_bg_loading {
    0% {opacity: 1;}
    100% {opacity: 0;}
}
@keyframes p2_bg_loading {
    0% {opacity: 1;}
    100% {opacity: 0;}
}

//page3
#page3 {
    display: none;
    -webkit-transition: .5s;
    transition: .5s;
    &.fadeIn {
        -webkit-transform: translate(0,-100%);
        transform: translate(0,-100%);
    }
    .bg {
        background: url("../img/p3_bg.jpg") no-repeat center center;
    }
    .p3_logo {
        width: 34.6875vw;
        height: 6.327vh;
        position: absolute;
        top: 7.82vh;
        right: 0;
        left: 0; 
        margin: auto;
        background: url("../img/p3_logo.png") no-repeat center center;
        background-size: 100%;
    }
    .p3_title {
        width: 48.125vw;
        height: 50vh;
        position: absolute;
        top: 21vh;
        left: 0;
        right: 0;
        margin:auto;
        background: url("../img/p3_title.png") no-repeat center center;
        background-size: 100%;
    }
    .p3_second {
        width: 22.8125vw;
        height: 41.652vh;
        position: absolute;
        top: 25.48vh;
        left: 3.75vw;
        background: url("../img/p3_couplet_second.png") no-repeat center center;
        background-size: 100%;
    }
    .p3_first {
        width: 22.8125vw;
        height: 41.652vh;
        position: absolute;
        top: 25.48vh;
        right: 3.75vw;
        background: url("../img/p3_couplet_first.png") no-repeat center center;
        background-size: 100%;
    }
    .p3_blessing {
        width: 32vw;
        height: 32vw;
        position: absolute;
        right: 0;
        left: 0; 
        bottom: 10vh;
        margin: auto;
        border-radius: 50%;
        background: url("../img/p3_blessing.png") no-repeat center center;
        background-size: 100%;
        -webkit-animation: p3_plessing 2s linear infinite;
        animation: p3_plessing 2s linear infinite;
    }
}
@-webkit-keyframes p3_plessing {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}
@keyframes p3_plessing {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}
